<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <style>
        ul{
            list-style:none
        }

        ul li{
            width: 50px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            border:solid 1px #ddd;
            cursor:pointer;
            float:left;
            margin-right: 10px;
            
        }

        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <button>来个好玩的</button>
    <button>下去吧</button>
    <hr>

    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        
        class App extends React.Component{
            state = {
                keyword: 'fengjing'
            }

            render(){
                return <div>
                        <ul>
                            <li onClick={this.change} type="scenery">风景</li>
                            <li onClick={this.change} type="city">城市</li>
                            <li onClick={this.change} type="animal">动物</li>
                        </ul>
                        <div className="clear"></div>
                        <hr />
                        {/*将当前组件的 keyword 属性传递给 Image 组件*/}
                        <Image  keyword={this.state.keyword} />
                    </div>
            }

            //单击事件
            change = (e) => {
                this.setState({
                    keyword: e.target.getAttribute('type')
                })
            }
        }

        class Image extends React.Component{
            //1. componentWillReceiveProps 组件将要接收到外层的 props 属性了
            componentWillReceiveProps(){
                console.log('componentWillReceiveProps  组件将要接收到外层的 props 属性了')
            }

            //2. shouldComponentUpdate
            shouldComponentUpdate(){
                console.log('shouldComponentUpdate 组件应该要更新..');
                return true;
            } 

            //3. componentWillUpdate
            componentWillUpdate(){
                console.log('componentWillUpdate 组件将要更新')
            }

            //4. 渲染
            render(){
                console.log('render 渲染中...')
                let {keyword} = this.props;
                return <div>
                        <img src={"https://source.unsplash.com/random/600x500/?"+keyword} alt=""/>
                    </div>
            }

            //5. componentDidUpdate
            componentDidUpdate(){
                console.log('componentDidUpdate 组件完成更新')
            }
        }


        //获取网页中 button
        let btns = document.querySelectorAll('button');

        btns[0].onclick = function(){
            ReactDOM.render(<App />, document.querySelector("#root"))
        }

        btns[1].onclick = function(){
            ReactDOM.unmountComponentAtNode(document.querySelector('#root'));
        }


    </script>


</body>
</html>